
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="zh"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="zh"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="zh"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh">  <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>老婆</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="http://www.htmleaf.com/templets/default/css/htmleaf-demo.min.css" />
	<style>
        * {
  margin: 0;
  padding: 0;
}
.swiper{
        width: 300px;
        height: 350px;
        position: absolute;
        top:153.3333vw;
        left: 10.3333vw;
    }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
html,
body {
  height: 100%;
}
 
body {
  overflow: scroll;
  display: flex;
  background:pink;
  perspective: 1000px;
  transform-style: preserve-3d;
}
 
#drag-container, #spin-container {
  position: relative;
  display: flex;
  margin: auto;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
}
 
#drag-container img, #drag-container video {
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}
 
#drag-container img:hover, #drag-container video:hover {
  box-shadow: 0 0 15px #fffd;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}
 
#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%) rotateX(90deg);
  color: #fff;
}
 
#ground {
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}
 
#music-container {
  position: absolute;
  top: 0;
  left: 0;
}
 
#carousel-container {
  width: 100%;
  height: 100%;
}
 
@keyframes spin {
  from{
    transform: rotateY(0deg);
  } to{
    transform: rotateY(360deg);
  }
}
@keyframes spinRevert {
  from{
    transform: rotateY(360deg);
  } to{
    transform: rotateY(0deg);
  }
}
    .focus{
        position: absolute;
        margin-top: 600px;
       
    }
    </style>
</head>
<body>
    <audio controls autoplay style="display: inline; position: absolute;top: 0;width: 19vw;">
        <source src="images/aa.mp3" type="audio/mp3">
        <source src= "images/aa.ogg" type="images/aa/ogg">
    </audio>
	<div id="drag-container">
        <div id="spin-container">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
        <img src="images/8.jpg" alt="">

        <p>和老婆100纪念日</p>
        </div>
        <div id="ground"></div>
      </div>
      <div id="music-container"></div>
      <!-- 下一部分 -->
      <p style="color: red;position: absolute; bottom:22.6667vw;font-size: 25px;left: 25.6667vw" >100天纪念日快乐！</p>

      <script src="js/swiper-bundle.min.js"></script>
      <!-- Swiper -->
      <div class="swiper mySwiper myself">
       <div class="swiper-wrapper">
         <div class="swiper-slide"><img src="images/10.jpg" alt=""></div>
         <div class="swiper-slide"><img src="images/11.jpg" alt=""></div>
         <div class="swiper-slide"><img src="images/12.jpg" alt=""></div>
       </div>
   
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
     </div>
   
      <!-- Initialize Swiper -->
       <script>
         var swiper = new Swiper(".myself", {
           navigation: {
             nextEl: ".swiper-button-next",
             prevEl: ".swiper-button-prev",
           },
         });
       </script>
      <script src="http://www.htmleaf.com/templets/default/js/htmleaf-demo.min.js"></script>
      <script src="js/swiper-bundle.min.js"></script>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script>
        var radius = 240; 
var autoRotate = true; 
var rotateSpeed = -60; 
var imgWidth = 120; 
var imgHeight = 170; 
 
var bgMusicURL = '';
var bgMusicControls = true; 
 
// ===================== start =======================
setTimeout(init, 100);
 
var obox = document.getElementById('drag-container');
var ospin = document.getElementById('spin-container');
var aImg = ospin.getElementsByTagName('img');
var aVid = ospin.getElementsByTagName('video');
var aEle = [...aImg, ...aVid]; 
 
ospin.style.width = imgWidth + "px";
ospin.style.height = imgHeight + "px";
 
var ground = document.getElementById('ground');
ground.style.width = radius * 3 + "px";
ground.style.height = radius * 3 + "px";
 
function init(delayTime) {
  for (var i = 0; i < aEle.length; i++) {
    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
    aEle[i].style.transition = "transform 1s";
    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
  }
}
 
function applyTranform(obj) {
  if(tY > 180) tY = 180;
  if(tY < 0) tY = 0;
 
  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
}
 
function playSpin(yes) {
  ospin.style.animationPlayState = (yes?'running':'paused');
}
 
var sX, sY, nX, nY, desX = 0,
    desY = 0,
    tX = 0,
    tY = 10;
 
if (autoRotate) {
  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
}
 
if (bgMusicURL) {
  document.getElementById('music-container').innerHTML += `
<audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>    
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
`;
}
 
if (mobilecheck()) {
  // ==================== Touch Events ====================
  document.ontouchstart = function(e) {
    clearInterval(obox.timer);
    e = e || window.event;
    var sX = e.touches[0].clientX,
        sY = e.touches[0].clientY;
 
    this.ontouchmove = function(e) {
      e = e || window.event;
      var nX = e.touches[0].clientX,
          nY = e.touches[0].clientY;
      desX = nX - sX;
      desY = nY - sY;
      tX += desX * 0.1;
      tY += desY * 0.1;
      applyTranform(obox);
      sX = nX;
      sY = nY;
    }
 
    this.ontouchend = function(e) {
      this.ontouchmove = this.ontouchend = null;
      obox.timer = setInterval(function() {
        desX *= 0.95;
        desY *= 0.95;
        tX += desX * 0.1;
        tY += desY * 0.1;
        applyTranform(obox);
        playSpin(false);
        if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
          clearInterval(obox.timer);
          playSpin(true);
        }
      }, 17);
    }
 
    // return false;
  }
} else {
  // ==================== Mouse Events ====================
  document.onmousedown = function(e) {
    clearInterval(obox.timer);
    e = e || window.event;
    var sX = e.clientX,
        sY = e.clientY;
 
    this.onmousemove = function(e) {
      e = e || window.event;
      var nX = e.clientX,
          nY = e.clientY;
      desX = nX - sX;
      desY = nY - sY;
      tX += desX * 0.1;
      tY += desY * 0.1;
      applyTranform(obox);
      sX = nX;
      sY = nY;
    }
    $(function(){
$("#video")[0].play();
})

    this.onmouseup = function(e) {
      this.onmousemove = this.onmouseup = null;
      obox.timer = setInterval(function() {
        desX *= 0.95;
        desY *= 0.95;
        tX += desX * 0.1;
        tY += desY * 0.1;
        applyTranform(obox);
        playSpin(false);
        if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
          clearInterval(obox.timer);
          playSpin(true);
        }
      }, 13);
    }
 
    return false;
  }
  document.onmousewheel = function(e) {
    e = e || window.event;
    var d = e.wheelDelta / 20 || -e.detail;
    radius += d;
    init(1);
  };
}
    </script>

<script type="text/javascript">
    IS_IPAD=navigator.userAgent.match(/iPad/i)!=null;
    var t={desktop:"100%",tabletlandscape:1040,tabletportrait:788,mobilelandscape:480,mobileportrait:340,placebo:0};
    jQuery(".responsive a").on("click",function(){
    var e=jQuery(this);
    for(device in t){
        if(e.hasClass(device)){
            clicked=device;
            jQuery("#iframe").width(t[device]);
            if(clicked==device){
                jQuery(".responsive a").removeClass("active");
                e.addClass("active")}}}
    return false});
    if(IS_IPAD){
        $("#iframe").css("padding-bottom","60px")
    }
</script>
<script type="text/javascript">
    $(".htmleaf-container--side").mCustomScrollbar({
        theme:"minimal"
    });
</script>

<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript">
		jQuery(document).ready(function($){
			$(".guidelist li").hover(
				function () {
					$(this).attr("class", "mouseon");
				  },
				  function () {
					$(this).attr("class", "mouseout");
				  }
			);
			$(".ftoollist li").mouseover(function(){
				$(this).siblings().removeClass("on");
				$(this).addClass("on");
				var preNumber=$(this).prevAll().size();
				$(".fimglist li").removeClass("onpre");
				$(".fimglist li:nth-child("+preNumber+")").addClass("onpre");
				var margin = 990;
				margin = margin *preNumber; 
				margin = margin * -1;
				$(".fimglist").stop().animate({marginLeft: margin + "px"}, {duration: 500});
			});
		});
	</script>
</body>
</html>